<template>
 <div class="wrapper">
    <div class="header">
      最近联系人
      <img src="../../img/icon_navigation@3x.png" alt="">
    </div>
    <ul>
      <li class="userItem">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035232992,4003217897&fm=27&gp=0.jpg" alt="">
        <div class="userItemText">
          <div class="user">张三<time>下午3:30</time></div>
          <p>你好啊！我是张三</p>
        </div>
      </li>
      <li class="userItem">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035232992,4003217897&fm=27&gp=0.jpg" alt="">
        <div class="userItemText">
          <div class="user">张三<time>下午3:30</time></div>
          <p>你好啊！我是张三</p>
        </div>
      </li>
      <li class="userItem">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1330520303,2221312694&fm=27&gp=0.jpg" alt="">
        <div class="userItemText">
          <div class="user">艺术交流群<time>下午3:30</time></div>
          <p>张三：今晚6点艺术交流展会即将开始</p>
        </div>
      </li>
    </ul>
 </div>

</template>
<script>
import { Toast } from 'mint-ui';

export default {
  data () {
    return {
      
    }
  },
  created () {
      
  },
  components: {
   
  },
  methods: {
   aa(){
     console.log(111);
     Toast({
        message: '提示',
        position: 'bottom',
        duration: 5000
      });
   }
  }
}

</script>
<style>
body {
  background-color: white!important;
}
</style>
<style lang="scss" scoped>
.wrapper {
  .header {
    width: 3.75rem;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 0.16rem;
    border-bottom: 1px solid #f4f4f4;
    background-color: white!important;
    img {
      width: 0.2rem;
      height: 0.14rem;
      position: absolute;
      right: 0.15rem;
      top: 50%;
      margin-top: -0.07rem;
    }
  }
  .userItem {
    height: 0.64rem;
    margin: 0 0.13rem;
    display: flex;
    align-items: center;
    img {
      width: 0.44rem;
      height: 0.44rem;
      border-radius: 50%;
    }
    .userItemText {
      width: 2.97rem;
      height: 0.65rem;
      margin-left: 0.1rem;
      border-bottom: 1px solid #E1E1E1;
      padding: 0.12rem 0;
      .user {
        height: 0.2rem;
        line-height: 0.2rem;
        color: #4A4A4A;
        font-size: 0.14rem;
        time {
          float: right;
          font-size: 11px;
          color: #818181;
        }
      }
      p {
        height: 0.2rem;
        line-height: 0.2rem;
        color: #818181;
        font-size: 12px;
      }
    }
  }
}


</style>